<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <div class="host-body">
        <div class="contain w-full h-full overflow-y-scroll">
          <header class="w-full h-[20%] sticky top-0 z-[99999]">
            <FHeader class="w-full h-[33%] bg-[#1e1e1e]" @linkTo="handleClick" :buttons="buttons" :showSearch="false"
              @toggleSearchBar="void (0)" />
            <div class="w-full h-[66%] anwserZone"></div>
          </header>
          <CommentBox class="w-[75%] mt-10" :commentCount="comments.length" :userInfo="userInfo" :reply-info="replyInfo" @submit-box="submitBox" @canel-box="cancelBox">
          </CommentBox>
          <CommentList  class="w-[75%]" :comments="comments"></CommentList>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import useDraw from "@/plugins/resize/useDraw.js";
import FHeader from '@/components/Header/index.vue';
import CommentList from "@/components/comments/CommentList.vue";
import CommentBox from "@/components/comments/CommentBox.vue";

export default {
  data() {
    return {
      buttons: [
        { type: '', text: '问答', click: 'comment',curr:'curTag' },
        { type: '', text: '登录', click: 'login' },
        { type: 'primary', text: '注册', click: 'register' }],
      submitting: false,
      value: '',
      userInfo: {
        uid: "uid000001",
        userName: "张三",
        avatar: "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"

      },
      replyInfo: {
        uid: "uid009",
        blogUid: "uid000003",
        replyUserUid: "uid000004",
        replyUid: "",
        avatar: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
      },
      comments: [
        {
          uid: 'uid000',
          userName: "陌溪",
          avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
          content: '有气保焊碳钢AI模型相关的内容吗?',
          layer:1,
          reply: [
            {
              uid: 'uid001',
              userName: "浅议",
              avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
              content: '有的，有的，可以搜索一下。',
              reply: [
                {
                  uid: 'uid002',
                  userName: "佳满",
                  avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
                  content: '貌似有，好像看到过',
                  reply: []
                }
              ]

            },
          ]
        },
        {
          uid: 'uid004',
          userName: "子千",
          avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
          content: '想了解基于振动的FSW质量诊断的相关实验',
          layer:1,
          reply: [
            {
              uid: 'uid005',
              userName: "余超",
              avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
              content: '不清楚，但是我想交流一下FFT焊缝形貌模拟预测的相关内容。',
              reply: []

            }
          ]
        },
      ],
    };
  },
  watch: {},
  computed: {

  },
  components: {
    CommentList,
    CommentBox,
    FHeader
  },
  mounted() {
    // this.setCommentList(this.comments);
    const { appRef, calcRate, windowDraw } = useDraw(this.$refs.appRef);
    calcRate()
    windowDraw()
  },
  methods: {
    handleClick(c) {
      switch (c.flag) {
        case 'login':
          router.push({ path: "/login" })
          break;
        case 'comment':
          router.push({ path: "/comments" })
        default:
          break;
      }
    },
    //拿到vuex中的写的两个方法
    // ...mapMutations(['setCommentList']),
    getMenuBtnList(menuTreeList, uid, comment) {

      if (menuTreeList == undefined || menuTreeList.length <= 0) {
        return;
      }

      for (let item of menuTreeList) {

        if (item.uid === uid) {
          var menu = item.reply;
          menu.push(comment);
        } else {
          this.getMenuBtnList(item.reply, uid, comment);
        }
      }
    },
    submitBox(e) {
      console.log("提交");
      var comments = this.$store.state.app.commentList;
      comments.push(e);
      // this.$store.commit("setCommentList", comments);
    },
    cancelBox(e) {
      console.log("取消", e)
    },
  },
};
</script>

<style lang='scss'>
.anwserZone {
  background-image: url('homeAssets/p31.png/');
  background-position: 250% 50%;

  &:before {
    content: '问答专区';
    position: absolute;
    transform: translateY(50%);
    top: 50%;
    left: 4.5rem;
    font-size: 2rem;
    font-weight: 500;
    color: #333;
  }
 
}
</style>